import base from "../base.js";
import cinemasApi from "../../api/cinemas.js"
export default class extends base {
    constructor(props) {
        super(props);
        this.data = {
            cinema: {
                _id: props._id
            }
        };
    }
    render() {
        this.$el.html(`
        <div>
        <h1>编辑影院</h1>
        <table>
          <tbody>
            <tr>
                <td>影院名</td>
                <td><input type="text" name="name" value="" class="name"></td>
            </tr>
            <tr>
                <td>影院地址</td>
                <td><input type="text" name="address" value="" class="address"></td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td><input type="text" name="phone" value="" class="phone"></td>
            </tr>
            <tr>
                <td>是否营业</td>
                <td>
                是<input type="radio" name="status" value="1" checked>
                否<input type="radio" name="status" value="0" >
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                  <button class="saveBtn">保存</button>
                  <button class="delBtn">删除</button>
                  <button>取消</button>
                </td>
            </tr>
          </tbody>
        </table>
      </div>    
        `);
    }

    async getCinema() {
        this.data.cinema = await cinemasApi.getOne(this.data.cinema._id);
        this.rerender();
        this.saveBtnEle = $(".saveBtn");
        this.delBtnEle = $(".delBtn");
        this.saveBtnEle[0].addEventListener("click", this.save.bind(this));
        this.delBtnEle[0].addEventListener("click", this.del.bind(this));
    }
    rerender() {
        const { name, address, phone, status } = this.data.cinema;
        this.$el.html(`
      <div>
          <h1 style="text-align:center">编辑影院</h1>
        <div class="layui-form"  lay-filter="formTest">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">影院名</label>
                <div class="layui-input-block">
                    <input type="text" value="${name}" style="width:500px" name="name" lay-verify="title" autocomplete="off" placeholder="请输入影院名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">影院地址</label>
                <div class="layui-input-block">
                    <input type="text" value="${address}" style="width:500px" name="address" lay-verify="title" autocomplete="off" placeholder="请输入影院地址" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">联系方式</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" value="${phone}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入联系方式" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">是否营业</label>
                <div class="layui-input-block">
                    <input type="text" name="status" value="${status}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入“是”或“否”" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn saveBtn" id="saveBtn" lay-submit="" lay-filter="demo1">修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary delBtn">删除</button>
                    <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                </div>
            </div>
         </div>
        </div>       
        `);
        this.nameEle = $("input[name='name']");
        this.addressEle = $("input[name='address']");
        this.phoneEle = $("input[name='phone']");
        this.statusEle = $("input[name='status']");
    }
    async save() {
        this.data.cinema.name = this.nameEle.val()
        this.data.cinema.address = this.addressEle.val()
        this.data.cinema.phone = this.phoneEle.val()
        this.data.cinema.status = this.statusEle.val() == "是" ? "true" : "false";
        const { _id, name, phone, address, status } = this.data.cinema;
        this.data.cinemas = await cinemasApi.xiu(_id, name, phone, address, status);
        location.hash="#/info/cinemas";
    }
    async del() {
        this.data.cinema.name = this.nameEle.val()
        this.data.cinema.address = this.addressEle.val()
        this.data.cinema.phone = this.phoneEle.val()
        this.data.cinema.status = this.statusEle.val() == "是" ? "true" : "false";
        const { _id, name, phone, address, status, imgs } = this.data.cinema;
        this.data.cinemas = await cinemasApi.shan(_id, name, phone, address, status, imgs);
        location.hash="#/info/cinemas";
    }
    handle() {

    }
    mounted() {
        this.getCinema();
    }
}